<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="clock">
        <div class="cover">
            <div class="cent">
                <div class="left  ">9</div>
                <div class="right ">3</div>
                <div class="center "></div>
                <div class="up  ">12</div>
                <div class="down ">6</div>
            </div>
            <div class="hour"></div>
            <div class="min"></div>
            <div class="second"></div>
        </div>
    </div>
    <div class="now"></div>
    <script>
        function times() {
            let hours = document.querySelector('.hour');
            let mins = document.querySelector('.min');
            let secounds = document.querySelector('.second');
            let now = document.querySelector('.now');

            let times = new Date();
            let hour = times.getHours();
            let min = times.getMinutes();
            let secound = times.getSeconds();
            let secound2 = secound * 6;
            let min2 = min * 6;
            // min2/12渐渐跨5度
            let hour2 = hour * 30 + 180 + min / 12;
            secounds.style.transform = `rotate(${secound2}deg)`;
            mins.style.transform = `rotate(${min2}deg)`;
            hours.style.transform = `rotate(${hour2}deg)`;
            now.innerHTML = hour + '时' + min + '分' + secound + '秒';
        }
        times();
        setInterval(times, 1000)
    </script>
</body>

</html>